<template>
<view class="open" v-show='isshow'>
	<view class="all"  @click='close'></view>
	<view class="bot" :class="isshow1?'top':'bottom'" :style="{'padding-bottom': (bottom+10) + 'rpx'}">
		<view class="item_b">
			<button class="item_b_b" :plain="true" open-type="share">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/pyq.png" mode="widthFix"></image>
			</button>
			<view class="i_tx">
				朋友
			</view>
		</view>
		<view class="item_b" @click="showhb" v-if="ishb">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/hb.png" mode="widthFix"></image>
			<view class="i_tx">
				海报
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		props:{
			ishb:{
				default:true,
				type:Boolean
			}
		},
		name:"open",
		data() {
			return {
				isshow:false,
				isshow1:false,
				bottom:0
			};
		},
		created() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.bottom = 40;
			            }
			        })
			    }
			});
		},
		methods:{
			show(){
				this.isshow=true
				this.$nextTick(()=>{
					this.isshow1=true
				})
			},
			close(){
				this.isshow1=false
				setTimeout(()=>{
					this.isshow=false
				},300)
			},
			showhb(){
				this.$emit('showhaibao')
			}
		}
	}
</script>

<style scoped lang="scss">
.open{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background-color: rgba($color: #000000, $alpha: .5);
	.all{
		width: 100%;
		height: 100%;
	}
	.bot{
		position: absolute;
		z-index: 1001;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		text-align: center;
		padding-top: 10px;
		transition: all 0.3s;
		.item_b_b{
			width: 48px;
			height: 48px;
			margin: 0 !important;
			margin-bottom: 5px !important;
			padding: 0 !important;
			background-color: #fff !important;
			border:none !important;
		}
		.item_b{
			padding: 0 20px 20px;
			image{
				width: 48px;
			}
			font-size: 14px;
			position: relative;
		}
		.i_tx{
			left: 0;
			position: absolute;
			width: 100%;
			text-align: center;
			bottom: 0px;
		}
	}
	.bottom{
		transform: translateY(100%);
	}
}
</style>
